<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-10-21 15:32:24
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-10-26 19:42:06
-->
<template>
  <div class="index">
    <div class="search_bar">
      <van-search
         v-model="value"
         shape="round"
         background="transparent"
         placeholder="搜索商品"
      />
    </div>
    <!-- 轮播图 --> 
    {{carousel}}
      <van-swipe style="height: 200px;backgroundColor:pink" vertical >
        <van-swipe-item ><img src="../../../public/1.jpg" alt="" style="width:100%;height:100%"></van-swipe-item>
        <van-swipe-item ><img src="../../../public/2.jpg" alt="" style="width:100%;height:100%"></van-swipe-item>
        <van-swipe-item ><img src="../../../public/3.jpg" alt="" style="width:100%;height:100%"></van-swipe-item>
        <van-swipe-item ><img src="../../../public/4.jpg" alt="" style="width:100%;height:100%"></van-swipe-item>
        <van-swipe-item ><img src="../../../public/5.jpg" alt="" style="width:100%;height:100%"></van-swipe-item>
      </van-swipe>
    </div>
    <!-- 分类 -->
    <van-grid square>
        <van-grid-item v-for="c in cps" :key="c.id" :icon="c.icon" :text="c.name" />
     </van-grid>
     <!-- 菜品 --> 
     <div >
       <van-tabs v-model:active="active" swipeable>
       <van-tab v-for="cp in cps" :key="cp.id" :title='cp.name'> 
         <!-- {{cp.products}} -->
          <ul class="products">
            <li v-for="p in cp.products" :key="p.id">
              <div class="photo"> 
                <img :src="p.photo" alt="" style="heigth:100%;width:100%" >
                <div style="font-weight:bold;color:red;padding:10px 10px 10px 10px">
                {{p.name}}             
              </div>
              </div>
              
            </li>
            
          </ul>
       </van-tab>
</van-tabs>
     </div>

            
    
</template>
<script>
import {onMounted, ref,computed} from 'vue'
import {useRouter} from 'vue-router'
import {get} from '../../utils/request'
export default {
  setup() {
    let active = ref(0)
    let cps = ref([]) // 分类及产品
    let router = useRouter();
    let carousel=ref([])

    let carouseler= async ()=>{
      let url='/carousel/findAll'
      let resp = get(url);
      carousel.value=resp.data;
    }
    

    let loadCategoryProducts = async ()=>{
      let url = "/app/product/queryCategoryWithProducts"
      let resp = await get(url);
      cps.value = resp.data;
    }
    // {num:,total:}
    let cart = computed(()=>{
      let result = {num:0,total:0}
      cps.value.forEach(cp => {
        cp.products.forEach(p=>{
          result.total += p.num * p.price;
          result.num += p.num;
        })
      });
      return result;
    })
   
    

    let toConfirmOrderHandler = ()=>{
      let orderLines = [];
      cps.value.forEach((cp)=>{
        cp.products.forEach(p=>{
          if(p.num>0){
            orderLines.push(p)
          }
        })
      })


      router.push({
        name:'confirm_order',
        params:{orderLines:JSON.stringify(orderLines)}
      })
    }

    onMounted( async ()=>{
      await loadCategoryProducts();
    })


    return {
      active,
      cps,
      cart,
      toConfirmOrderHandler
    }
  },
}
</script>

<style lang="scss" scoped>
.products{
  background: white;
  display: flex;
  flex-wrap: wrap;
  li{
    height: 200px;
     width: 50%;
     .photo{
       height: 500px;

     }

  }
}
</style>